<template>
<div>
  <div class="top">
    <div class="header fl">
        <!--<img src="../assets/images/headerIcon.png" alt="">-->
        <img src="../assets/images/man.png" alt="" v-if="PatientInfoReturn.xb==='男'">
        <img src="../assets/images/woman.png" alt=""  v-if="PatientInfoReturn.xb==='女'">
    </div>
    <div class="text fr">
        <div class="name">{{PatientInfoReturn.xm}}<span>{{this.PatientInfoReturn.nl}}岁</span><span>{{PatientInfoReturn.xb}}</span></div>
        <!--<div class="tag">-->
            <!--<span>青霉素过敏</span>-->
            <!--<span>高血压</span>-->
            <!--<span>重大疾病</span>-->
            <!--<span>盲肠切除手术</span>-->
        <!--</div>-->
    </div>
  </div>
  <div class="main">
    <div class="content">
      <div class="list">
        <div class="item">
          <router-link :to="{path:'/yyzz',query:{name:'belle'}}">
            <div class="img"><img src="../assets/images/icon1.png" alt=""></div>
            <div class="text">预约转诊</div>
          </router-link>
          
        </div>
        <div class="item">
          <router-link :to="{path:'/mzjl'}">
            <div class="img"><img src="../assets/images/icon2.png" alt=""></div>
            <div class="text">门急诊信息</div>
          </router-link>
        </div>
        <div class="item">
            <router-link :to="{path:'/zyxx'}">
                <div class="img"><img src="../assets/images/icon3.png" alt=""></div>
                <div class="text">住院信息</div>
            </router-link>
        </div>
        <div class="item">
          <router-link :to="{path:'/jzfx',query:{}}">
            <div class="img"><img src="../assets/images/icon4.png" alt=""></div>
            <div class="text">就诊分析</div>
          </router-link>
          
        </div>
        <div class="item">
          <router-link :to="{path:'/jybg',query:{}}">
            <div class="img"><img src="../assets/images/icon5.png" alt=""></div>
            <div class="text">检验报告</div>
          </router-link>
        </div>
        <div class="item">
          <router-link :to="{path:'/jcbg',query:{}}">
            <div class="img"><img src="../assets/images/icon6.png" alt=""></div>
            <div class="text">检查报告</div>
          </router-link>
          
        </div>
        <div class="item">
            <router-link :to="{path:'/mjzcf'}">
                <div class="img"><img src="../assets/images/icon7.png" alt=""></div>
                <div class="text">门急诊处方</div>
            </router-link>
          
        </div>

      </div>
      
    </div>
    <div class="bottom">
        <div class="title">

            <span class="text">
                    <img src="../assets/images/message.png" alt="">推荐消息
            </span>

            <div class="border">
                <p class="fl">
                    <span></span>
                </p>
                <p class="fr">
                    <span></span>
                </p>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(value,key) in this.tag" :key="key">
                <div class="item-left fl">{{key}}</div>
                <div class="item-right fl">
                    <span v-for="(item1,i1) in value" :key="i1">{{item1}}</span>
                </div>
            </div>
        </div>

    </div>
  </div>
  <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
  <tips :hosName="hosName"></tips>
  <!-- 水印 -->
  <div class="watermark"></div>
</div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getPatientInfoApi,getMpiTagsApi } from '@/api/healthRecords'

export default {
  name: 'JKDA',
  data () {
    return {
        tag:{},
        arr:[],
            // {
            //     "healthyTag": ["肾脏疾病","50-59岁"],
            //     "medicineTag": ["阿托伐他汀钙片"],
            //     "diseaseTag": ["非毒性单个甲状腺结节","慢性肾炎","高血压"],
            //     "operationTag": []
            // },
            // [
            //     {key:"healthyTag",value: ["肾脏疾病", "50-59岁"]},
            //     {key:"medicineTag",value: ["阿托伐他汀钙片"]},
            //     {key:"diseaseTag",value: ["非毒性单个甲状腺结节", "慢性肾炎", "高血压"]},
            //     {key:"operationTag",value: []}
            // ],
        hosName:'',
        testData:[
            // {
            //     name:'异常指标',
            //     list:['fuck','you']
            // },
            // {
            //     name:'异常kfd',
            //     list:['fdafd','2you123']
            // }
        ],
        name1:'abc',
        PatientInfoParams:{
            "zjhm":""
        },
        zjhm: this.$route.query.zjhm,
        PatientInfoReturn:{"birthday":""},
        birthday: '',
        nowAge:""
    }

  },
    methods: {
        getMpiTags() {
            getMpiTagsApi(JSON.stringify(this.PatientInfoParams)).then(response => {
                if (response.data.code == 1) {
                    this.tag = response.data.data
                }
            })
        },
        //_1.1获取档案首页患者信息getPatientInfo
        init() {


            this.PatientInfoParams.zjhm = this.$route.query.zjhm;
            localStorage.setItem('zjhm', JSON.stringify(this.PatientInfoParams) );
        },
        getPatientInfo() {
            // this.getAge();
            getPatientInfoApi(JSON.stringify(this.PatientInfoParams)).then(response => {
                if (response.data.code == 1) {
                    this.PatientInfoReturn = response.data.data
                    this.PatientInfoReturn.birthday = response.data.data.csrq;
                    this.PatientInfoReturn.nl = response.data.data.nl;
                    this.nowAge= response.data.data.nl;
                    localStorage.setItem('jbxx', JSON.stringify(response.data.data));
                }
            })

        },
        // //获取患者生日
        // getbirthday() {
        //     var idCard = this.$route.query.zjhm
        //     // var idCard = this.PatientInfoParams.zjhm
        //     var birthday = "";
        //     if(idCard != null && idCard != ""){
        //         if(idCard.length == 15){
        //             birthday = "19"+idCard.substr(6,6);
        //         } else if(idCard.length == 18){
        //             birthday = idCard.substr(6,8);
        //         }
        //
        //         this.birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
        //     }
        // },
        // //获取患者现在的年纪(不是病例上的)
        // getAge() {
        //     this.getbirthday();
        //     var year = this.birthday.substr(0, 4);
        //     this.nowAge =parseInt( new Date().getFullYear()) - parseInt(year);
        // }
    },
  components:{
      tips
  },
    created() {
        this.init();
        this.getPatientInfo();
        this.getMpiTags();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
  float:left;
}
.fr{
  float:right;
}
.top {
    overflow: hidden;
    zoom: 1;
    background: url('~@/assets/images/bj.png') no-repeat;
    padding: 0.6rem 2rem;
    background-size: 100%;
    .header {
        width: 4.3rem;
        height: 4.3rem;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .text {
        color: #fff;
        width: 75%;
        padding-top: 0.5rem;
        .name {
            font-size: 1.3rem;
            span {
                font-size: 1rem;
                margin-left: 0.5rem;
            }
        }
        .tag span {
            display: inline-block;
            background: #2EA4FB;
            padding: 0.2rem 0.5rem;
            color: #B7ECFF;
            font-size: 1rem;
            margin-right: 1rem;
            margin-top: 0.5rem;
            border-radius: 1rem;
        }
    }
}

.content {
    background: #fff;
    padding: 1.7rem 1.5rem;
    border-bottom: #eeeeee solid 1rem;
    .list {
        display: flex;
        flex-wrap: wrap;
        .item {
            width: 25%;
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1rem;
            a {
                color: #333;
            }
            .img {
                width: 3.3rem;
                height: 3.3rem;
                border-radius: 50%;
                overflow: hidden;
                text-align: center;
                line-height: 3.3rem;
                display: inline-block;
            }
        }
    }
}

.bottom {
    background: #fff;
    padding: 1.3rem 1rem;
    .title {
        text-align: center;
        font-size: 1rem;
        position: relative;
        img {
            width: 1rem;
            vertical-align: middle;
            margin-right: 0.3rem;
        }
        .border {
            height: 1px;
            width: 100%;
            position: absolute;
            top: 0.5rem;
            left: 0;
            p {
                height: 1px;
                background: #DCDCDC;
                width: 50%;
            }
            span {
                display: inline-block;
                background: #DCDCDC;
                width: 3px;
                height: 3px;
                border-radius: 50%;
                position: absolute;
                top: -1px;
            }
            .fl{
                span {
                    left: 0;
                }
            }
            .fr{
                span{
                    right:0;
                }
            }
        }
        .text {
            background: #fff;
            position: relative;
            z-index: 99;
            padding: 0 0.5rem;
        }
    }
    .list {
        margin-top: 1.3rem;
        font-size: 1rem;
        color: #666;
        .item {
            background: url('~@/assets/images/point.png') left 0.5rem no-repeat;
            background-size: 0.3rem;
            padding-left: 1rem;
            margin-bottom: 1rem;
            overflow: hidden;
            .item-left{
                width:20%;
            }
            .item-right{
                width:80%;
            }
            span {
                display: inline-block;
                padding: 0.3rem 0.6rem;
                border: #35B2F2 solid 1px;
                color: #35B2F2;
                margin-left: 1rem;
                border-radius: 1.6rem;
                margin-bottom: 0.5rem;
            }
        }
    }
}
</style>
